<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue-Learning</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>

  <!-- click响应式事件 -->
  <div id="app2">
    <p>{{ foo }}</p>
    <button v-on:click="foo = 'baz'">Change it</button>
  </div>
  <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: "Hello Vue!"
        }
      })
    
      var obj = {
        foo: 'bar'
      }
      new Vue({
        el: "#app2",
        data: obj
      })
    </script>
  
  <!-- 使用js表达式 -->
  <div id="app3">
    {{ message.split('').reverse().join(' ') }}
  </div>
  <script>
    new Vue({
      el: "#app3",
      data: {
        message: "hello"
      }
    })
  </script>

  <!-- v-bind -->
  <button id='bt1' v-bind:disabled="bt1">Button1</button>
  <button id='bt2' v-bind:disabled="bt2">Button2</button>
  <script>
    new Vue({
      el: '#bt1',
      data: {
        bt1: true
      }
    })
    new Vue({
      el: '#bt2',
      data: {
        bt2: false
      }
    })
  </script>

  <!-- v-if -->
  <p v-if="seen" id="app5">现在你看到我了</p>
  <script>
    new Vue({
      el: '#app5',
      data: {
        seen: false
      }
    })
  </script>

    <!-- 计算属性，计算属性基于依赖进行缓存，相对直接绑定方法具有一定性能优势 -->
  <div id="app6">
    <p>Originial message: "{{ message }}"</p>
    <p>Compute reversed message: "{{reversedMessage}}"</p>
    <button v-on:click="changeApp6">点击测试计算属性变化</button>
  </div>
  <script>
    var app6 = new Vue({
      el: "#app6",
      data: {
        message: "hello"
      },
      computed: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }
      },
      methods: {
        changeApp6: function() {
          app6.message = '12345'
        }
      }
    })
  </script>
  
  <!-- template元素上使用v-if条件渲染分组 -->
  <div id="app7">
    <template  v-if="app7">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
  </div>
  <script>
    new Vue({
      el: "#app7",
      data: {
        app7: true
      }
    })
  </script>

  <!-- 内联处理器访问原生时间对象 -->
  <button id="app8" v-on:click="warn('Form cannot be submitted yet.', $event)">submit</button>
  <script>
    new Vue({
      el: "#app8",
      methods: {
        warn: function (message, event) {
          if (event) {
            event.preventDefault();
            alert(message)
          }
        }
      }
    })
  </script>

  <!-- 表单输入绑定 -->
  <div id = "app10">
    <template>
      <input v-model="message" placeholder="edit me">
      <p>Message is: {{ message }}</p>
    </template>
  </div>
  <script>
    new Vue({
      el: "#app10",
      data: {
        message: "123"
      }
    })
  </script>

<!-- 表单输入绑定修饰符 -->
<div id = "app11">
    <template>
      <!-- 加入lazy表示当发生change事件时数据发生改变 -->
      <input v-model.lazy="message" placeholder="edit me">
      <p>Message is: {{ message }}</p>
    </template>
  </div>
  <script>
    new Vue({
      el: "#app11",
      data: {
        message: "123"
      }
    })
  </script>


</body>
</html>